<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>record</title>
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script src="/js/vue.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/css/bootstrap.css">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/css/bootstrap-theme.css"
    >

    <!--    <link rel="stylesheet" href="/css/bootstrapValidator.css"/>-->

    <!--    <script type="text/javascript" src="/js/bootstrapValidator.js"></script>-->
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/js/bootstrap.min.js"
            crossorigin="anonymous"></script>

    <script src="/js/distpicker.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
    <script src="/js/bootstrap-table-export.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

    <!--fontawesome-->
    <script src="https://cdn.bootcss.com/font-awesome/5.8.1/js/all.min.js"></script>
    <!--bootstrap-table-->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
    <!--bootstrap-table-lanuage-->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>
    <!--bootstrap-table-export-->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/export/bootstrap-table-export.min.js"></script>
    <!--在客户端保存生成的导出文件-->
    <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <!--以XLSX（Excel 2007+ XML格式）格式导出表（SheetJS）-->
    <script src="https://cdn.bootcss.com/xlsx/0.14.2/xlsx.core.min.js"></script>
    <!--以PNG格式导出表格-->
    <!--对于IE支持包括 html2canvas 之前的 es6-promise-->
    <script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <!--将表导出为PDF文件-->
    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
    <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
    <!--无论期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）-->
    <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>

</head>
<body id="myForm">




<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">后台管理系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a th:href="@{/admin/logout}">登出</a></li>
            </ul>

        </div>
    </div>
</nav>

<div class="container-fluid">

    <form class="form-horizontal" >
        <!--用户框-->
        <br/>
        <div class="form-group">



            <br/>
            <br/>

            <label  class="col-sm-2 control-label"></label>
            <div class="col-sm-10 form-group">

                <h4 >多条件查询（不设置则不考虑该条件）</h4>
            </div>

            <label  class="col-sm-2 control-label"></label>
            <div class="col-sm-10 form-group">
                学生id：<input style="width:500px; display:inline;" id="stuId" type="text" class="form-control" v-model="selector.stuId"/>
            </div>

            <label  class="col-sm-2 control-label"></label>
            <div class="col-sm-10 form-group">
                学生姓名：<input style="width:500px; display:inline;" type="text" class="form-control" v-model="selector.name"/>
            </div>

            <label for="" class="col-sm-2 control-label"></label>
            <div class="col-sm-10 form-group">
                手机号码：<input style="width:500px; display:inline;"  type="text" class="form-control" v-model="selector.phone"/>
            </div>

            <label for="" class="col-sm-2 control-label"></label>
            <div class="col-sm-10 form-group">
                日期：<input style="width:500px; display:inline;"  type="date" class="form-control" v-model="selector.date"/>
            </div>

            <label for="" class="col-sm-2 control-label"></label>
            <div class="col-sm-10 form-group">
                到达过疫情地区：
                <input type="radio" class="control-label"
                       value="是"  id="dangerAreaReach"
                       v-model="selector.dangerAreaReach"/>
                <label for="dangerAreaReach">是&nbsp;</label>



                <input type="radio" class="control-label"
                        value="否" id="dangerAreaNotReach"
                       v-model="selector.dangerAreaReach"/>
                <label for="dangerAreaNotReach">否</label>
                <br/>
                接触过重点人员：
                <input type="radio" class="control-label"
                        value="是" id="dangerPeopleContact"
                       v-model="selector.dangerPeopleContact"/>
                <label for="dangerPeopleContact">是&nbsp;</label>


                <input type="radio" class="control-label"
                        value="否" id="dangerPeopleNotContact"
                       v-model="selector.dangerPeopleContact"/>
                <label for="dangerPeopleNotContact">否</label>

                <br/>
                是重点人员:
                <input type="radio" class="control-label"
                        value="是" id="dangerMark"
                       v-model="selector.dangerMark"/>
                <label for="dangerMark">是&nbsp;</label>


                <input type="radio" class="control-label"
                       value="否" id="dangerNotMark"
                       v-model="selector.dangerMark"/>
                <label for="dangerNotMark">否</label>
                <br/>
            </div>
            <label for="temperature" class="col-sm-2 control-label"></label>
            <div class="col-sm-10 form-group">
                体温（以上）：<input id="temperature" style="width:500px; display:inline;"  type="text" class="form-control" v-model="selector.temperature"/>
            </div>

            <div class="col-sm-offset-2 col-sm-10">
                <button @click="submitSelector" type="button" data-dismiss="modal" class="btn btn-default">
                    点击查询
                </button>
            </div>
        </div>

        <div class="form-group">


        </div>


        <div class="form-group">



        </div>
    </form>
    <hr />
    <div class="container">
        <div id="toolbar">
            <select class="form-control">
                <option value="">Export Basic</option>
                <option value="all">Export All</option>
                <option value="selected">Export Selected</option>
            </select>
        </div>

        <table id="table" data-locale="zh-CN"></table>
    </div>

    <div class="row">

<!--        <div class="col-sm-3 col-md-2 sidebar">-->
<!--            -->

<!--        </div>-->
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="goodTable">

            <div class="table-responsive">



<!--                <table id="myTable" class="table table-striped">-->
<!--                    <thead>-->
<!--                    <tr>-->
<!--                        <th>学生id</th>-->
<!--                        <th>学生姓名</th>-->
<!--                        <th>手机号码</th>-->
<!--                        <th>日期</th>-->
<!--                        <th>健康状态</th>-->
<!--                        <th>到达过疫情重点地区</th>-->
<!--                        <th>接触过疫情重点人员</th>-->
<!--                        <th>疫情防控的重点人员</th>-->
<!--                        <th>紧急联系人姓名</th>-->
<!--                        <th>紧急联系人电话</th>-->
<!--                        <th>体温</th>-->
<!--                        <th>现在所在区域</th>-->
<!--                    </tr>-->
<!--                    </thead>-->
<!--                    <tbody>-->

<!--                    <tr v-for="record in recordList">-->
<!--                        <td>{{record.stuId}}</td>-->
<!--                        <td>{{record.name}}</td>-->
<!--                        <td>{{record.phone}}</td>-->
<!--                        <td>{{record.date}}</td>-->
<!--                        <td>{{record.health}}</td>-->
<!--                        <td>{{record.dangerAreaReach}}</td>-->
<!--                        <td>{{record.dangerPeopleContact}}</td>-->
<!--                        <td>{{record.dangerMark}}</td>-->
<!--                        <td>{{record.emergencyContactName}}</td>-->
<!--                        <td>{{record.emergencyContactPhone}}</td>-->
<!--                        <td>{{record.temperature}}</td>-->
<!--                        <td>{{record.nowLocation}}</td>-->


<!--                    </tr>-->

<!--                    </tbody>-->
<!--                </table>-->
            </div>
        </div>
    </div>
</div>





<script>

    const myForm = {
        data() {
            return {
                selector:{
                    stuId:null,
                    name:null,
                    phone:null,
                    date:null,
                    dangerAreaReach:null,
                    dangerPeopleContact:null,
                    dangerMark:null,
                    temperature:null
                },
                recordList:[]
            }
        },
        methods:{
            submitSelector(){
                console.log(this.selector)
                axios.post("/admin/getRecordWithSelector",this.selector).then(res=>{
                    this.recordList=res.data.data
                    alert("查询到"+res.data.data.length+"条结果")
                    setting(res.data.data)
                })
            }
        }
    }

    Vue.createApp(myForm).mount('#myForm')


    function setting(result){
        $('#toolbar').find('select').change(function () {
            $('#table').bootstrapTable('destroy').bootstrapTable({
                data: result,
                pagination: true,//显示分页
                clickToSelect: true,//单击列表选中
                toolbar: "#toolbar",//显示工具栏
                showToggle: true,//工具栏上显示列表模式切换
                showExport: true,//工具栏上显示导出按钮
                sortName: "date",
                exportDataType: $(this).val(),//显示导出范围
                exportTypes: ['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],//导出格式
                exportOptions: {//导出设置
                    fileName: 'Tablexxx',//下载文件名称
                },
                columns: [
                    {
                        field: 'state',
                        checkbox: true,
                        visible: $(this).val() === 'selected'
                    },
                    {
                        field: 'stuId',
                        title: '学生id'
                    }, {
                        field: 'name',
                        title: '学生姓名'
                    }, {
                        field: 'phone',
                        title: '手机号码'
                    }, {
                        field: 'date',
                        title: '日期',
                        formatter: function (value, row, index) {
                            var date =  new Date(value)
                            return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()
                        }
                    }, {
                        field: 'health',
                        title: '健康状态'
                    }, {
                        field: 'dangerAreaReach',
                        title: '到达过疫情重点地区'
                    }, {
                        field: 'dangerPeopleContact',
                        title: '接触过疫情重点人员'
                    }, {
                        field: 'dangerMark',
                        title: '疫情防控的重点人员'
                    }, {
                        field: 'emergencyContactName',
                        title: '紧急联系人姓名'
                    }, {
                        field: 'emergencyContactPhone',
                        title: '紧急联系人电话'
                    }, {
                        field: 'temperature',
                        title: '体温'
                    }, {
                        field: 'nowLocation',
                        title: '现在所在区域'
                    }
                ]
            })
        }).trigger('change');
    }



    // 自定义按钮导出数据
    function exportData(){
        $('#table').tableExport({
            type: 'excel',
            exportDataType: "all",
            ignoreColumn: [0],//忽略某一列的索引
            fileName: 'Tablexxx',//下载文件名称
            onCellHtmlData: function (cell, row, col, data){//处理导出内容,自定义某一行、某一列、某个单元格的内容
                console.info(data);
                return data;
            },
        });
    }
</script>


<style>
    /*
    * Base structure
    */

    /* Move down content because we have a fixed navbar that is 50px tall */
    body {
        padding-top: 50px;
    }


    /*
     * Global add-ons
     */

    .sub-header {
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    /*
     * Top navigation
     * Hide default border to remove 1px line.
     */
    .navbar-fixed-top {
        border: 0;
    }

    /*
     * Sidebar
     */

    /* Hide for mobile, show later */
    .sidebar {
        display: none;
    }

    @media (min-width: 768px) {
        .sidebar {
            position: fixed;
            top: 51px;
            bottom: 0;
            left: 0;
            z-index: 1000;
            display: block;
            padding: 20px;
            overflow-x: hidden;
            overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
            background-color: #f5f5f5;
            border-right: 1px solid #eee;
        }
    }

    /* Sidebar navigation */
    .nav-sidebar {
        margin-right: -21px; /* 20px padding + 1px border */
        margin-bottom: 20px;
        margin-left: -20px;
    }

    .nav-sidebar > li > a {
        padding-right: 20px;
        padding-left: 20px;
    }

    .nav-sidebar > .active > a,
    .nav-sidebar > .active > a:hover,
    .nav-sidebar > .active > a:focus {
        color: #fff;
        background-color: #428bca;
    }


    /*
     * Main content
     */

    .main {
        padding: 20px;
    }

    @media (min-width: 768px) {
        .main {
            padding-right: 40px;
            padding-left: 40px;
        }
    }

    .main .page-header {
        margin-top: 0;
    }


    /*
     * Placeholder dashboard ideas
     */

    .placeholders {
        margin-bottom: 30px;
        text-align: center;
    }

    .placeholders h4 {
        margin-bottom: 0;
    }

    .placeholder {
        margin-bottom: 20px;
    }

    .placeholder img {
        display: inline-block;
        border-radius: 50%;
    }

</style>


</body>
</html>